<template>
  <div class="home-wrap">
    <el-container style="height:94%">
      <!--    头部-->
      <el-header class="header-swap" >
        <div style="margin-top: 20px">
          <el-row style="align-items: center">
            <el-col :span="23">
              <div class="work-color">
                <i class="el-icon-s-home"></i>公寓管理
              </div>
            </el-col>
            <el-col :span="1">
              <el-dropdown @command="handleCommand">
              <div class="userClass">
                <i class="el-icon-user-solid"></i>
                {{username}}
              </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="loginOut">退出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-container >
        <!--      侧边导航栏-->
        <el-card>
          <el-aside width="200px" class="aside-wrap">
            <el-menu
                router
                class="el-menu-vertical-demo"
                background-color="#ffffff"
                :unique-opened=true
                text-color="#606266"
                active-text-color="#1CC09F"
                :default-active="isSelect"
            >
              <el-submenu :index="item.path" v-for="item in menu" :key="item.name">
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span >{{item.name}}</span>
                </template>
                <el-menu-item-group v-if="item.children">
                  <el-menu-item :index="items.path"
                                v-for="items in item.children"
                                :key="items.path">
                    <i :class="items.icon"></i>{{items.name}}
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-aside>
        </el-card>
        <!--      内容展示-->
        <el-main class="main-wrap">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

  </div>

</template>

<script>
export default{
  name:'home',
  data(){
    return {
      username:'',
      reqFlag:{
        logout:true,
      },
      isSelect: "",
      menu: []
    }
  },
  created () {
    this.setCurrentRoute()
    this.getMenu()
    this.username = window.localStorage.getItem('username')
  },
  watch: {
    $route () {
      this.setCurrentRoute()
    }
  },
  methods:{
    async getMenu(){
      const {data:res}=await this.$http.get('/user/getMenu')
      if (res.code !== 200) return this.$message.error('获取菜单列表失败')
      console.log(window.localStorage.getItem('token'))

      this.menu=JSON.parse(res.data)
    },
    setCurrentRoute () {
      this.isSelect = this.$route.path;//关键   通过他就可以监听到当前路由状态并激活当前菜单
    },
    handleCommand(command){
      if(command == 'loginOut'){
        this.loginOut()
      }
    },
    //退出
    loginOut(){
      this.$router.push('/login')
      window.localStorage.clear()
    },
  }
}
</script>

<style scoped>
  .home-wrap{
    width: 100%;
    height: 100%;
    /*background-color:#FF0000 ;*/
  }
.header-swap{
  background-color:#E3E4E5 ;
}
  .work-color{
    color: #606266;
  }
  .aside-wrap{
    height: 100%;
    background-color: #FFFFFF;
    /*margin: 20px;*/
  }
  userClass:active{
    color: #67c23a;
    background-color: #67c23a;
  }
  .main-wrap{
    height: 100%;
    width: 100%;
  }
</style>
